import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { getHouseDetailsAPI, favoritesAPI, isFavoritesAPI } from '../../api'
import NavHeader from '../../components/NavHeader'
import { serverurl } from '../../utils/request'
import { Swiper, Toast } from 'antd-mobile'
import collect from '../../assets/images/collect.png'
import './index.scss'

function Detail() {
  const [params] = useSearchParams()
  let id = params.get('id')
  // 房屋详情数据
  const [houseDetails, setHouseDetails] = useState({})
  // 轮播图数据
  const [banners, setBanners] = useState([])
  // 标签数据
  const [tags, setTags] = useState([])
  // 朝向
  const [oriented, setOriented] = useState([])
  // 设施
  const [supporting, setSupporting] = useState([])
  // 是否收藏
  const [isFavorite, setIsFavorite] = useState(false)

  useEffect(() => {
    loadDetailsData() // 调用获取房屋详情方法
    isFavoritesHandler() // 调用更新是否收藏的方法
  }, [])

  // 获取房屋详情数据方法
  const loadDetailsData = async () => {
    const res = await getHouseDetailsAPI(id)
    console.log('详情', res.data.body)
    setHouseDetails(res.data.body) // 详情总数居
    setBanners(res.data.body.houseImg) // 轮播图数据
    setTags(res.data.body.tags)
    setOriented(res.data.body.oriented)
    setSupporting(res.data.body.supporting)
  }

  // 轮播图每一项
  const items = banners.map((item, index) => (
    <Swiper.Item key={index}>
      <div className="content">
        <img src={serverurl + item} alt="" />
      </div>
    </Swiper.Item>
  ))

  // 点击收藏
  const favoritesHandler = async () => {
    const { data: res } = await favoritesAPI(houseDetails.houseCode)
    // 提示用户收藏成功
    Toast.show({
      content: '收藏成功',
    })
    setIsFavorite(true) // 设置 ’已收藏‘
    console.log('收藏成功', res)
  }

  // 查看房屋是否收藏
  const isFavoritesHandler = async () => {
    const { data: res } = await isFavoritesAPI(id)
    setIsFavorite(res.body.isFavorite) // 更新是否收藏状态
    console.log('是否收藏', res)
  }

  return (
    <div className="detail">
      {/* 顶部导航栏 */}
      <NavHeader
        title={houseDetails.community ? houseDetails.community : '详情'}
      ></NavHeader>
      {/* 轮播图 */}
      <Swiper autoplay loop>
        {items}
      </Swiper>
      {/* 房屋基本信息 */}
      <div className="detailCon">
        <div className="descCon">
          <h3>{houseDetails.title}</h3>
          <div className="tags">
            {tags.map((item, index) => (
              <span key={index} className={'tag' + (index + 1)}>
                {item}
              </span>
            ))}
          </div>
        </div>
        <div className="priceCon">
          <div className="priceItem">
            <span>{houseDetails.price}/月</span>
            <p>租金</p>
          </div>
          <div className="priceItem">
            <span>{houseDetails.roomType}</span>
            <p>房型</p>
          </div>
          <div className="priceItem">
            <span>{houseDetails.size}平米</span>
            <p>面积</p>
          </div>
        </div>
        <div className="infoCon">
          <div className="infoLeft">
            <span>
              装修：<b>精装</b>
            </span>
            <span>
              楼层：<b>{houseDetails.floor}</b>
            </span>
          </div>
          <div className="infoRight">
            <span>
              朝向：<b>{oriented.join('、')}</b>
            </span>
            <span>
              类型：<b>普通住宅</b>
            </span>
          </div>
        </div>
        <div className="supportingCon">
          内置设施：
          {supporting.length ? (
            supporting.map((item) => <span key={item}>{item}、</span>)
          ) : (
            <span>暂无介绍</span>
          )}
        </div>
      </div>

      {/* 底部收藏、在线咨询、电话预约 */}
      <div className="footerCon">
        <div className="collect" onClick={favoritesHandler}>
          <img src={collect} alt="" />
          <span>{isFavorite ? '已收藏' : '收藏'}</span>
        </div>
        <div className="consult">在线咨询</div>
        <div className="bespeak">电话预约</div>
      </div>
    </div>
  )
}

export default Detail
